<template>
  <div>
    <ol
      class="tab-options"
      role="list"
      style="height: 186px"
      area="合肥"
      v-if="Hiddenthis[0]"
    >
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="0"
        >
          瑶海区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          庐阳区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          蜀山区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          包河区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          长丰县
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          肥西县
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          肥东县
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          巢湖市
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          庐江县
        </button>
      </li>
    </ol>
    <ol
      class="tab-options"
      role="list"
      style="height: 124px"
      area="马鞍山"
      v-if="Hiddenthis[1]"
    >
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="0"
        >
          当涂县
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          花山区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          雨山区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          博望区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          含山县
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          和县
        </button>
      </li>
    </ol>
    <ol
      class="tab-options"
      role="list"
      style="height: 186px"
      area="安庆"
      v-if="Hiddenthis[2]"
    >
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="0"
        >
          大观区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          怀宁县
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          潜山市
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          宿松县
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          太湖县
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          桐城市
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          望江县
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          迎江区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          宜秀区
        </button>
      </li>
      <li role="listitem">
        <button
          type="button"
          class="
            rc-province-selector-option rc-province-selector-option-district
          "
          tabindex="-1"
        >
          岳西县
        </button>
      </li>
    </ol>
  </div>
</template>

<script>
import bus from "../../../../../../../bus";
export default {
  data() {
    return {
      Onearea: [],
      Allarea: [],
      Hiddenthis: [true, true,true,true, true,true,],
      NowHight: [],
      Hiddenarea: "",
      Hiddenallarea:false,
      Ollength:''
    };
  },
  created() {
    const that = this;
    bus.$on("HiddenCity", function (data) {
      that.Onearea.splice(0, 1, data);
      // 获取ol标签里面的属性值
      var Olarea = document.getElementsByClassName("tab-options");
      // 新建一个数组，给Hiddenthis进行赋值
      var Hiddenthat = [];
      // 这个只能遍历一次
      if (that.Hiddenallarea==false) {
         for (let i = 0; i < Olarea.length; i++) {
        that.Ollength=Olarea.length
        // 将ol的属性值全部添加到一个数组里面
        that.Allarea.push(Olarea[i].getAttribute("area"));
        //  获取ol的高度
        that.NowHight.push(Olarea[i].getAttribute("style").replace(/[^0-9]/ig,""));
      }
      }
      for (let j = 0; j < that.Ollength; j++) {
      Hiddenthat.push(false);
        
      }
     
      that.Hiddenthis = Hiddenthat;
      // 每次点击一下都会重新遍历取值，所以需要数组去重
      var newAllarea = [...new Set(that.Allarea)];
      // 检测索引
      var AreaNumber = newAllarea.indexOf(data);
      // 根据索引改变数组从而实现展示
      that.Hiddenthis.splice(AreaNumber, 1, true);
      // 传值给ContextOne从而改变展示的高度
      that.Hiddenarea=that.Allarea[AreaNumber]
       bus.$emit("NowHightThree", that.NowHight[AreaNumber], that.Hiddenarea);
       that.Hiddenallarea=true
    });
  },
};
</script>

<style lang="less" scoped>
ol {
  width: 100%;
  display: flex;
  flex-flow: column wrap;
  margin: 0;
  padding: 0;
  li {
    list-style: none;
    margin: 18px 10px 18px 0;
    text-align: left;
    button {
      border: none;
      background-color: #fff;
      cursor: pointer;
    }
  }
}
</style>